<template>
  <div class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
    <div class="grid gap-10 row-gap-6 mb-8 sm:grid-cols-2 lg:grid-cols-11">
      <div class="sm:col-span-4">
        <a aria-label="Go home" title="XX科技" class="inline-flex items-center">
          <img :src="infos.mainlogo" style="width: 200px" alt="">
        </a>
        <div class="mt-6 lg:max-w-sm">
          <p class="text-sm text-gray-800">
            {{ infos.description }}
          </p>
        </div>
      </div>
      <div class=" sm:col-span-1"></div>
      <div class=" sm:col-span-3 space-y-1 text-sm flex-auto">
        <p class="text-base font-bold tracking-wide text-gray-900">联系方式</p>
        <div class="flex">
          <p class="mr-1 text-gray-800">手机:</p>
          <a aria-label="Our phone" title="Our phone"
            class="transition-colors duration-300 text-deep-purple-accent-400 hover:text-deep-purple-800">{{ infos.phone
            }}</a>
        </div>
        <div class="flex">
          <p class="mr-1 text-gray-800">邮箱:</p>
          <a aria-label="Our email" title="Our email"
            class="transition-colors duration-300 text-deep-purple-accent-400 hover:text-deep-purple-800">{{ infos.email
            }}</a>
        </div>
        <div class="flex">
          <p class="mr-1 text-gray-800">QQ:</p>
          <a aria-label="Our qq" title="Our qq"
            class="transition-colors duration-300 text-deep-purple-accent-400 hover:text-deep-purple-800">{{ infos.qq
            }}</a>
        </div>
        <div class="flex">
          <div class="mr-1 text-gray-800" style="width: 40px;">地址:</div>
          <a target="_blank" rel="noopener noreferrer" aria-label="Our address" title="Our address"
            class="transition-colors duration-300 text-deep-purple-accent-400 hover:text-deep-purple-800">
            {{ infos.address }}
          </a>
        </div>
      </div>
      <div class=" sm:col-span-1"></div>
      <div class=" sm:col-span-2">
        <span class=" text-base font-bold tracking-wide text-gray-900">友情链接</span>
        <div class="flex items-center mt-1 space-x-3" v-for='item in infos.friendship_link'>
          <a :href="item.link" class="text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400">
            {{ item.text }}
          </a>
        </div>
      </div>
    </div>
    <div class="flex flex-col-reverse justify-between pt-5 pb-10 border-t lg:flex-row">
      <p class="text-sm text-gray-600">
        © {{ infos.company }}
      </p>
      <ul class="flex flex-col mb-3 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row">
        <li v-for="item in infos.bottom_numbers">
          <a :href="item.link" target="_Blank"
            class="text-sm text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">{{ item.name
            }}:{{ item.num }}</a>
        </li>

      </ul>
      <ul class="flex flex-col mb-3 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row">
        <li v-for="item in infos.bottom_links">
          <router-link :to="item.link"
            class="text-sm text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400">{{ item.text
            }}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { getSettings } from '@/api/setting';
const infos = ref({})
onMounted(() => {
  getSettings(['mainlogo', 'phone', 'address', 'name', 'email', 'qq', 'company', 'description', 'friendship_link', 'bottom_links', 'bottom_numbers']).then((res) => {
    console.log(res);
    infos.value = res.data.data;
    infos.value.friendship_link = JSON.parse(res.data.data.friendship_link);
    infos.value.bottom_links = JSON.parse(res.data.data.bottom_links);
    infos.value.bottom_numbers = JSON.parse(res.data.data.bottom_numbers)
  });
});

</script>
